<template>
  <!-- 向下虚化柱状图 -->
  <div id="home" ref="allEcharts"></div>
</template>
<script>
// @ is an alias to /src
// 传值：item的size；横坐标；纵坐标；item的背景色；整体的背景色，上面的数字是否显示
export default {
  props: {},
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    initChart() {
      const that = this;
      const colorLine = [
        "#1685FF",
        "#FF9B1E",
        "#FFD234",
        "#0FEFAB",
        "#1BB9FF",
        "#ca26ff",
        "#009D33",
      ];
      const colorLegend = colorLine;
      const data = [
        { value: 1048, name: "文书卷/件" },
        { value: 735, name: "专业" },
        { value: 580, name: "科技" },
        { value: 484, name: "会计" },
        { value: 300, name: "干部（死亡）" },
        { value: 148, name: "实物" },
        { value: 135, name: "照片" },
      ];
      // 右侧 标注 圆环 文字
      const legendData = data.map((item, index) => {
        return {
          name: item.name,
          itemStyle: {
            color: "#000",
            borderWidth: 2,
            borderColor: colorLegend[index % colorLegend.length],
          },
        };
      });

      if (!this.myChart) {
        this.myChart = this.$echarts.init(this.$refs.allEcharts);
      }
      let option = {
        title: {
          text: "",
          textStyle: {
            color: "#000",
          },
          x: "29%",
          y: "46%",
        },
        tooltip: {
          show: true,
          formatter: "{b}: {c}个 \t{d}%",
        },
        legend: {
          orient: "vertical",
          // type: 'scroll',
          top: "30%",
          left: "75%",
          icon: "circle",
          itemGap: 5,
          itemHeight: 8,
          itemWidth: 8,
          formatter: (params) => {
            const aim = data.find((item) => item.name === params);
            return `{name|${params}}`;
          },
          pageTextStyle: {
            color: "#000",
          },
          textStyle: {
            lineHeight: 20,
            color: "#000",
            rich: {
              name: {
                fontSize: 12,
                fontFamily: "PingFang-SC-Regular",
              },
              number: {
                fontSize: 14,
                fontFamily: "DS-Digital-Bold",
                padding: [0, 5, 0, 8],
              },
              unit: {
                fontSize: 14,
              },
            },
          },
          data: legendData,
        },
        series: [
          {
            type: "pie",
            // startAngle:45,
            radius: ["50%", "70%"],
            center: ["40%", "50%"],
            clockwise: true,
            avoidLabelOverlap: true,
            label: {
              color: "#000",
              fontSize: 12,
              show: true,
              position: "outside",
              // padding: [0, -2, 20, -20],
              formatter: function (params) {
                const percent = params.percent.toFixed(0) + "%";
                return params.name + "：" + +"\n" + percent;
              },
            },
            labelLine: {
              //label线的长度
              show: true, //数据标签引导线
              showAbove: true,
              length: 20,
              length2: 15,
              lineStyle: { cap: "round" },
            },
            itemStyle: {
              // 设置渐变
              color: function (params) {
                return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(58, 87, 105, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colorLine[params.dataIndex % colorLine.length],
                      // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                };
              },
            },
            data,
          },
        ],
      };
      this.myChart.setOption(option, true);
    },
  },
  mounted() {
    this.initChart();
  },
  watch: {
    // chartData: {
    //   handler(n) {
    //     if (n && n.yData && n.series) {
    //       if (n.yData.length !== n.series.length) {
    //         throw new Error("y轴数组长度必须与series长度相等");
    //       }
    //       this.initChart();
    //     }
    //   },
    //   deep: true,
    // },
  },
};
</script>
<style lang="scss" scoped>
#home {
  width: 100%;
  height: 100%;
}
</style>
